<script lang="ts" setup>
import type { AnalysisOverviewItem } from '@vben/common-ui';
import type { TabOption } from '@vben/types';

import { ref } from 'vue';

import {
  AnalysisChartCard,
  AnalysisChartsTabs,
  AnalysisOverview,
} from '@vben/common-ui';
import {
  SvgBellIcon,
  SvgCardIcon,
  SvgDownloadIcon,
  SvgWalletIcon,
} from '@vben/icons';

// 顶部统计卡片数据
const overviewItems: AnalysisOverviewItem[] = [
  {
    icon: SvgCardIcon,
    title: '在线无人机',
    totalTitle: '在线无人机',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgDownloadIcon,
    title: '待审批飞行计划',
    totalTitle: '待审批飞行计划',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgBellIcon,
    title: '当日预警数',
    totalTitle: '当日预警数',
    totalValue: 0,
    value: 0,
  },
  {
    icon: SvgWalletIcon,
    title: '设备在线率',
    totalTitle: '设备在线率',
    totalValue: 0,
    value: 0,
  },
  // {
  //   icon: SvgCakeIcon,
  //   title: '禁飞区数量',
  //   totalTitle: '禁飞区数量',
  //   totalValue: 42,
  //   value: 42,
  // },
];

// 实时报警数据
const alertData = ref([
  {
    id: 1,
    title: '无人机闯入禁飞区',
    content: '疑似无人机(DJI-M300-A2B53C)闯入中心禁飞区域，当前距离150米。',
    location: '东城区中南路广场附近',
    time: '10:15',
  },
  {
    id: 2,
    title: '疑似未备案无人机',
    content: '区域内发现未备案无人机活动，无法获取飞行数据，当前距离85米。',
    location: '西区科创园区附近',
    time: '10:02',
  },
  {
    id: 3,
    title: '无人机信号异常',
    content:
      '疑似无人机(DJI-X200-10086)信号异常，疑似位置在高新公园上空，已持续29秒。',
    location: '高新公园',
    time: '09:58',
  },
]);

// 飞行计划概况数据
const flightPlanData = ref([
  {
    key: '1',
    planId: 'FP-20230618-001',
    applicant: '公安安警大队',
    takeoffTime: '10:30',
    status: '已批准',
  },
  {
    key: '2',
    planId: 'FP-20230618-002',
    applicant: '城市管理局',
    takeoffTime: '11:15',
    status: '待审批',
  },
  {
    key: '3',
    planId: 'FP-20230618-003',
    applicant: '应急管理局',
    takeoffTime: '13:00',
    status: '已批准',
  },
  {
    key: '4',
    planId: 'FP-20230618-004',
    applicant: '东方航空工作室',
    takeoffTime: '14:30',
    status: '待审批',
  },
  {
    key: '5',
    planId: 'FP-20230618-005',
    applicant: '星空科技有限公司',
    takeoffTime: '15:45',
    status: '已拒绝',
  },
  {
    key: '6',
    planId: 'FP-20230618-006',
    applicant: '市政规划',
    takeoffTime: '16:30',
    status: '待审批',
  },
]);

// 图表选项卡
const chartTabs: TabOption[] = [
  {
    label: '空域活动趋势',
    value: 'spaceActivity',
  },
  {
    label: '无人机活动趋势',
    value: 'droneActivity',
  },
];
</script>

<template>
  <div class="p-5">
    <!-- 顶部统计卡片 -->
    <AnalysisOverview :items="overviewItems" />

    <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-2">
      <!-- 实时报警 -->
      <AnalysisChartCard title="实时报警" class="h-[320px] overflow-auto">
        <div
          v-for="alert in alertData"
          :key="alert.id"
          class="border-warning bg-background mb-4 border-l-4 p-3"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <div class="bg-warning mr-2 h-2 w-2 rounded-full"></div>
              <h4 class="font-bold">{{ alert.title }}</h4>
            </div>
            <div class="text-muted-foreground text-sm">{{ alert.time }}</div>
          </div>
          <p class="mt-2 text-sm">{{ alert.content }}</p>
          <div class="text-muted-foreground mt-1 flex items-center text-xs">
            <span class="mr-2">📍 {{ alert.location }}</span>
          </div>
        </div>
      </AnalysisChartCard>

      <!-- 飞行计划概况 -->
      <AnalysisChartCard title="飞行计划概况" class="h-[320px] overflow-auto">
        <table class="w-full">
          <thead>
            <tr>
              <th class="text-left">计划编号</th>
              <th class="text-left">申请方</th>
              <th class="text-left">起飞时间</th>
              <th class="text-left">状态</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="item in flightPlanData"
              :key="item.key"
              class="border-border border-b"
            >
              <td class="py-2">{{ item.planId }}</td>
              <td>{{ item.applicant }}</td>
              <td>{{ item.takeoffTime }}</td>
              <td>
                <span
                  :class="{
                    'text-success': item.status === '已批准',
                    'text-warning': item.status === '待审批',
                    'text-error': item.status === '已拒绝',
                  }"
                >
                  {{ item.status }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </AnalysisChartCard>
    </div>

    <!-- 趋势图表选项卡 -->
    <AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
      <template #spaceActivity>
        <div class="h-[300px]">
          <h3 class="mb-4 text-center">空域活动趋势图表</h3>
          <div class="flex h-[250px] items-center justify-center">
            <p class="text-muted-foreground">图表数据加载中...</p>
          </div>
        </div>
      </template>
      <template #droneActivity>
        <div class="h-[300px]">
          <h3 class="mb-4 text-center">无人机活动趋势图表</h3>
          <div class="flex h-[250px] items-center justify-center">
            <p class="text-muted-foreground">图表数据加载中...</p>
          </div>
        </div>
      </template>
    </AnalysisChartsTabs>

    <!-- 底部图表 -->
    <div class="mt-5 grid grid-cols-1 gap-5 md:grid-cols-3">
      <AnalysisChartCard title="禁飞区侵入统计">
        <div class="flex h-[200px] items-center justify-center">
          <p class="text-muted-foreground">禁飞区侵入统计图表</p>
        </div>
      </AnalysisChartCard>

      <AnalysisChartCard title="无人机类型分布">
        <div class="flex h-[200px] items-center justify-center">
          <p class="text-muted-foreground">无人机类型分布饼图</p>
        </div>
      </AnalysisChartCard>

      <AnalysisChartCard title="报警事件分析">
        <div class="flex h-[200px] items-center justify-center">
          <p class="text-muted-foreground">报警事件分析饼图</p>
        </div>
      </AnalysisChartCard>
    </div>

    <!-- 设备状态 -->
    <div class="mt-5">
      <AnalysisChartCard title="侦测设备状态">
        <div class="flex h-[200px] items-center justify-center">
          <p class="text-muted-foreground">侦测设备状态饼图</p>
        </div>
      </AnalysisChartCard>
    </div>
  </div>
</template>
